<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<script src="${basePath}jQuery Core 1.12.4/jquery-1.12.4.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8,"
	data-href="${basePath}bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" id="bs-theme-stylesheet">
<!-- Bootstrap core JavaScript
		<!-- Placed at the end of the document so the pages load faster -->
<script src="${basePath}bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 分页插件的引入 -->
<link href="${basePath}pagination-2.0.7/css/pagination.css"
	rel="stylesheet" />
<script src="${basePath}pagination-2.0.7/js/pagination.min.js"></script>
<!-- bootstrap-datetimepicker -->
<link
	href="${basePath}bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" />
<script
	src="${basePath}bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script
	src="${basePath}bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<!-- 加载bootstrap模态框的js和css -->	
<link
	href="${basePath}bootstrap-3.3.7-dist/css/bootstrapEx.css" rel="stylesheet" />
<script
	src="${basePath}bootstrap-3.3.7-dist/js/bootstrapEx.js"></script>
<!-- 加载的jquery脚本 -->
<script type="text/javascript">

	//页面加载完成时就执行该查询操作
	$(function() {
		doAjaxQuery();
	});
	//dom加载完成时就执行该方法
	$(function() {
		$('#datetimepicker1,#datetimepicker2').datetimepicker({
			format : 'YYYY-MM-DD HH:mm:ss',
			locale : moment.locale('zh-cn')
		});
	});
</script>

<script type="text/javascript">

	////////////bootstrap模态框的初始化//////////
	//dom初始化完成时，加载模态框
	function showModal(iframeUrl) {
        //创建一个模态框
        var Modal3=InitModal3(iframeUrl);
        //显示模态框
        Modal3.show();
        //Modal关闭完成时的时间处理（只需要定义该函数就会调用）
        modal3_Hideend=function(){
        	//console.info("here...:");
        	//调用ajax进行数据修改之后的更新
        	doAjaxQuery();
        }
	}
	//模态框的初始化
	function InitModal3(iframeUrl){
		//模态框加载的父标签以及模态框生成的div
		$(document.body).append('<div id="modal3"></div>');
		//创建一个模态框对象
		Modal3=new Modal();
		//模态框标题设置为空
		Modal3.title="";
		//模态框将在的位置
		Modal3.renderto="#modal3";
		//是否绘制完成后显示模态框
		Modal3.InitShow=true;
		//模态框的按钮数组
		Modal3.btns=[{
			//关闭按钮
			id:"closebtn",
			text:"修改"
		}];
		//创建tab对象
		tab1=new Tab();
		Modal3.OnfirstInited=function(thismodal){
			tab1.tabs=[{
				//加载的tab控件的id
				id: "tabs1",
				title: "用户信息修改",
				active: true,
				//tab标签中是否加载iframe框架
				isiframe:true,
				url: iframeUrl
			}];
			//tab加载位置
			tab1.renderto=thismodal.body;
			//初始化
			tab1.Init();
			//给id为btn1的按钮添加一个click事件
			$("#closebtn").click(function(){
				//调用iframe加载页面中的from表单的submit提交事件
			    /*
			    *使用jquery选择器选择模态框中的id为tabs1加载的iframe对象
			    *然后再从iframe对象的组成元素中，使用find方法找到id为fromMod的from表单对象
			    *调用找到from表单submit事件，发送request请求到服务器（修改操作）
			    *等价于 点击了保存按钮
			    */
				$('#tabs1>iframe').contents().find("#formMod").submit();
			})
		}
		//返回模态框对象
		return Modal3;
	}
	///////////bootstrap模态框的初始化结束////////////
	function doAjaxQuery() {
		$.ajax({
			type : "POST",//请求的类型get/post
			url : "${basePatch}StudentInfoAjaxQueryServlet",//服务器url
			dataType : "json",//服务器返回的数据类型
			data : $("#myForm").serialize(),
			success : function(data) { //成功之后的回调函数
				//调用分页插件的分页的行为方法
				console.info("data:");
				console.info(data);
				//当查询结果不为空时进行分页处理
				if (data != null && data.length > 0) {
					//分页处理
					doPaging(data);
				} else {
					//查询结果为空时，情况显示的table内容
					$("#tbShow").html("");
				}
			}
		});
	}
	function doDeleteAjaxQuery(delIndex) {
		//alert("delete:"+delIndex);
		//将删除记录的id值赋值给隐藏控件，通过form表单发送到后台
		$("#delIndex").val(delIndex);
		$.ajax({
			type : "POST",//请求的类型get/post
			url : "${basePatch}StudentInfoAjaxDeleteServlet",//服务器url
			dataType : "json",//服务器返回的数据类型
			data : $("#myForm").serialize(),
			success : function(data) { //成功之后的回调函数
				//调用分页插件的分页的行为方法
				console.info("data:");
				console.info(data);
				//当查询结果不为空时进行分页处理
				if (data != null && data.length > 0) {
					//分页处理
					doPaging(data);
				} else {
					//查询结果为空时，情况显示的table内容
					$("#tbShow").html("");
				}
			}
		});
	}
	//调用分页控件
	function doPaging(pageDatas) {
		//调用分页插件的分页处理方法
		$('#pager').pagination({
			dataSource : pageDatas,//分页的数据源
			pageSize : 3,//每页有几条记录
			showGoInput : true,//是否显示输入页面处理
			showGoButton : true,
			callback : function(data, pagination) {//点击分页插件时的回调方法
				//注意：dataSource数据为空时，不会执行回调函数
				//调用分页数据的解析处理方法
				parseJsonData(data);
			}
		})
	}

	//json解析处理函数
	function parseJsonData(data) {
		var strResult = "";

		//使用each函数进行解析

		$
				.each(
						data,
						function(index, eachVal) {
							strResult += "<tr>";

							strResult += "<th scope='row'>";
							strResult += index + 1;
							strResult += "</th>";

							strResult += "<td>";
							strResult += eachVal.stu_name;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_sex;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_birthday;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_address;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_tel;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_department;
							strResult += "</td>";

							strResult += "<td><img style='width: 30px; heigth: 30px;' src='";	
		                    strResult +=eachVal.stu_img;	
		                    strResult +="'></td>";
							//修改列
							strResult += "<td>";
							strResult += "<a href='javascript:void(0)' onclick='showModal(\"StudentInfoModalModifyDispartchServlet?"
									+"jp=WEB-INF/logined/studentInfoManager/studentInfoModalModify&sid="
									+ eachVal.stu_id
									+"\");'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></a>";
							strResult += "</td>";
							//删除列
							strResult += "<td>";
							strResult += "<a href='javascript:doDeleteAjaxQuery("
									+ eachVal.stu_id
									+ ");' onclick='return confirm(\"是否要删除["
									+ eachVal.stu_name
									+ "]该记录\");'>  <span class='glyphicon glyphicon-trash' aria-hidden='true'></span></a>";
							strResult += "</td>";
							strResult += "</tr>";
						});
		//将解析的结果内容，添加到显示的控件中
		$("#tbShow").html(strResult);
	}
</script>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-2"></div>
					<div class="col-md-8">
						<form class="form-horizontal" id="myForm">
							<div class="form-group">
							<!-- 隐藏控件：删除记录的id -->
							<input type="hidden" id="delIndex" name="delIndex">
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuName"
										name="stu_name" placeholder="请输入学生姓名">
								</div>
								<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-4">
									<label class="radio-inline"> <input type="radio"
										id="stusex2" name="stu_sex" value="女"> 女
									</label> 
									<label class="radio-inline"> <input type="radio"
										id="stusex2" name="stu_sex" value="男"> 男
									</label>
									<label class="radio-inline"> <input type="radio"
										id="stusex2" name="stu_sex" value="" checked> 性别不限
									</label>
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">出生日期</label>
								<div class="col-sm-4">
									<!-- <input type="text" class="form-control" id="stuBirthday"
										name="stu_birthday" placeholder="请选择出生日期"> -->
									<div class='input-group date' id='datetimepicker1'>
										<input type='text' class="form-control" id="stuBirthday"
											name="stu_birthday" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
									<div class='input-group date' id='datetimepicker2'>
										<input type='text' class="form-control" id="stuBirthday2"
											name="stu_birthday2" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>

								<label for="inputPassword3" class="col-sm-2 control-label">地址</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuAddress"
										name="stu_address" placeholder="请输入地址">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">电话</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuTel"
										name="stu_tel" placeholder="请输入电话">
								</div>

								<label for="inputPassword3" class="col-sm-2 control-label">系别</label>
								<div class="col-sm-4">
									<select class="form-control" id="stuDepartment"
										name="stu_department">
										<option></option>
										<option value="1">计算机</option>
										<option value="2">电信</option>
										<option value="3">机电</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-4 col-sm-4">
									<button type="button" class="btn btn-default"
										onclick="doAjaxQuery()">查询</button>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<button type="reset" class="btn btn-default">重置</button>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-2"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="bs-example" data-example-id="hoverable-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>出生日期</th>
					<th>地址</th>
					<th>电话</th>
					<th>系别</th>
					<th>头像</th>
					<th>修改</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody id="tbShow">
			</tbody>
		</table>
		<div id="pager">
			      <!-- pagination所需容器 -->
			      <div class="m-pagination"></div>
			</div>
	</div>
</body>
</html>